<template>
	<view>
		<view class="car-box flex-column" :class="{'bar-content': type == 1}" :style="boxStyle">
			<template v-if="dataList.length">
				<view class="car-top-box flex-spb-cn">
					<text class="car-top__left">共{{count}}件商品</text>
					<view class="car-top__right flex-cn" @click="clickManage">
						<template v-if="!isManage">
							<text class="qh-rt-single qh-rt-a-zu4420"></text>
							<text>管理</text>
						</template>
						<text v-else>完成</text>
					</view>
				</view>
				<view class="flex-column-100 car-goods-box">
					<qh-scroll-view parent-el-name=".car-goods-box" @init="initScroll" refresher-enabled @refresherrefresh="pullDownRefresh"
						:refresher-triggered="isRefresh" refresher-background="transparent">
						<view class="car-goods-content">
							<view class="car-goods-list flex-cn" v-for="(item, index) in dataList" :key="index" @touchstart="touchStart($event, item.id)"
								@touchmove="touchMove($event)" :style="moveId == item.id ? ('margin-left:-' + (moveWidth > 20 ? moveWidth : 0) + 'px') : ''">
								<qh-radio v-model="item.checked" padding="20" class="car-goods-check"></qh-radio>
								<view @click="toDetail(item.goods_id)"> 	
									<qh-goods-image :src="item.goods_img" size="200" radius="12"></qh-goods-image>
								</view>
								<view class="car-goods-list__right flex-row-100 flex-col-spb">
									<view class="car-goods-list__name text-ellipsis" @click="toDetail(item.goods_id)">{{item.goods_name}}</view>
									<view style="color: #9e9e9e;font-size: 13px;" v-if="item.sku_name">{{ item.sku_name }}</view>
									<view class="car-goods-list__sku-box flex-spb-cn" v-if="item.attribute == 2" @click.stop="changeSku(index)">
										<text class="text-ellipsis">{{item.sku_name}}</text>
										<text class="qh-rt-single qh-rt-a-zu4421 car-goods-list__sku-icon"></text>
									</view>
									<view class="flex-end-spb">
										<view class="car-goods-price-box" @click="toDetail(item.goods_id)">
											<view v-if="showPlusPrice(item)" class="flex-cn">
												<text class="plus-price-color">￥{{item.plus_price}}</text>
												<text class="plus-price-icon">PLUS</text>
											</view>
											<view v-if="showVipPrice(item)" class="flex-cn">
												<text class="price-color">￥{{item.shop_mem_price}}</text>
												<text class="vip-price-icon">VIP</text>
											</view>
											<view v-if="showOnlinePrice(item)" class="price-color">￥{{item.online_price}}</view>
											<view class="flex-cn" v-if="item.rebate > 0">
												<text class="plus-price-color">￥</text>
												<text class="plus-price-color" style="font-size: 22rpx;"> {{ item.rebate }}</text>
												<text class="plus-price-icon">返利</text>
											</view>
										</view>
										<view class="car-num-box flex-cn">
											<text class="qh-rt-single qh-rt-a-zu4424 car-num-icon" @click="setDec(index)"></text>
											<input v-model="item.num" type="number" placeholder-class="pl" class="car-num-input"
												@blur="inputBlur($event, index)" maxlength="9" placeholder="1">
											<text class="qh-rt-single qh-rt-a-zu4423 car-num-icon" @click="setInc(index)"></text>
										</view>
									</view>
								</view>
								<view class="car-goods-del flex-cn-cn" @click.stop="
								toDel(index)">删除</view>
							</view>
						</view>
						<qh-loaded-tip v-if="dataList.length" text="已显示全部"></qh-loaded-tip>
					</qh-scroll-view>
				</view>
				<!-- 底部按钮 -->
				<view class="car-footer-box flex-spb-cn" :class="{'tabbar-page-bottom': type == 1}" :style="footerStyle">
					<qh-radio v-model="allChecked" @change="changeAllCheck" padding="20">
						<text class="car-footer__check-text" :class="{'checked': allChecked}">全选</text>
					</qh-radio>
					<view class="flex-cn">
						<view class="flex-end">
							<view class="car-footer-text">
								<text>合计：</text>
								<text class="price">￥</text>
							</view>
							<text class="car-footer-price">{{checkedTotal}}</text>
						</view>
						<view v-show="!isManage">
							<login-and-register v-if="checkedCount > 0 && userInfo.platform_type == 2 && !userInfo.vid"
								:type="userInfo.login_state == 1 ? 4 : 3" @success="toSettlement">
								<view class="car-footer-btn">结算</view>
							</login-and-register>
							<view v-else class="car-footer-btn" :class="{'disabled': checkedCount == 0}" @click="toSettlement">结算</view>
						</view>
						<view v-show="isManage" class="car-footer-btn" :class="{'disabled': checkedCount == 0}" @click="delGoods">删除</view>
					</view>
				</view>
			</template>

			<scroll-view v-else-if="isLoadCarGoods" scroll-y="true" class="scroll-view tabbar-page-bottom" :show-scrollbar="false"
				@scrolltolower="getGoodsList">
				<view class="scroll-view-content">
					<!-- 空提示 -->
					<view class="empty-tip-box flex-col-cn-cn">
						<qh-image :src="emptyImageUrl" width="545" height="340" style="margin-top: 100rpx;"></qh-image>
						<text class="car-empty-tip">购物车是空的哦~</text>
						<text class="car-empty-sub-tip">生活不易去犒劳一下自己吧</text>
						<view class="car-empty-btn" @click="toHome">去逛逛</view>
					</view>
					<!-- 商品列表 -->
					<template v-if="goodsList.length">
						<view class="car-empty-title">你可能还会喜欢</view>
						<view class="goods-list-box flex-spb flex-wrap">
							<view class="goods-item flex-col-spb" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item.goods_id)">

								<view>
									<qh-goods-image :src="item.path" size="336" radius="16rpx 16rpx 0 0"></qh-goods-image>
									<view class="goods-name">{{item.goods_name}}</view>
								</view>

								<view class="flex-end-spb">
									<view class="goods-price-box">
										<view v-if="showPlusPrice(item)" class="flex-cn">
											<text class="plus-price-color">￥{{item.plus_price}}</text>
											<text class="plus-price-icon">PLUS</text>
										</view>

										<view v-if="showVipPrice(item)" class="flex-cn">
											<text class="price-color">￥{{item.shop_mem_price}}</text>
											<text class="vip-price-icon">VIP</text>
										</view>

										<view v-if="showOnlinePrice(item)" class="price-color">￥{{item.online_price}}</view>
										
									</view>
									<text class="qh-rt-single qh-rt-tianjia add-car-icon" @click.stop="addToCar(index)"></text>
								</view>

							</view>
						</view>
					</template>
				</view>
			</scroll-view>	
		</view>
		<!-- 规格弹窗 -->
		<block v-if="showSelectSku">
			<choose-sku :sku="sku" :goodsinfo="goods" goodsType="1" @close="closeSku"></choose-sku>
		</block>
	</view>

</template>

<script>
	const app = getApp().globalData;
	import toDecimal from '@/utils/toDecimal.js';
	import qhScrollMixin from "@/components/qh-scroll-view/mixins.js";
	export default {
		mixins: [qhScrollMixin], // 使用mixin
		props: {
			type: {
				type: [String, Number],
				default: 1
			},
		},
		data() {
			return {
				count: 0,
				vipDiscount: 1,
				isManage: false,
				allChecked: false,
				checkedIds: [],
				checkIndexs: [],
				checkedCount: 0,
				dataList: [],
				isRefresh: false,
				showSelectSku: false,
				isLoadCarGoods: false,
				changeSkuIndex: '',
				goods: {},
				sku: {
					showChangeNum: false, //是否显示选择数量
					btnText: '确定', //按钮文字
				},

				delBtnWidth: uni.upx2px(136),
				moveId: '',
				moveStartX: 0,
				moveStartY: 0,
				moveWidth: 0,

				goodsList: [],
				isLoading: false,
				canLoad: true,
				goodsForm: {
					page: 1,
					limit: 10,
				},
				userInfo: {
					user_type: 1
				},
			}
		},
		computed: {
			checkedTotal() {
				let total = 0;
				let checkedIds = [];
				let checkIndexs = [];
				let checkShopCarIds = {};
				this.dataList.forEach((item, index) => {
					if (item.checked) {
						checkedIds.push(item.id);
						checkShopCarIds[item.id] = true;
						checkIndexs.unshift(index);
						let price = item.online_price;
						let discount = 1;
						if (this.$store.userInfo.type == 2 && item.plus_mem_status == 1 && item.plus_price !== null) {
							price = item.plus_price;
						} else if (this.$store.userInfo.type != 1) {
							discount = item.vip_online_state == 1 ? this.vipDiscount : 1;
							if (item.shop_mem_status == 1 && item.shop_mem_price !== null) {
								price = item.shop_mem_price;
							}
						}
						total = toDecimal(toDecimal(toDecimal(price * discount) * item.num) + total);
					}
				})
				this.checkedCount = checkedIds.length;
				this.checkedIds = checkedIds;
				this.checkIndexs = checkIndexs;
				this.allChecked = this.checkedCount > 0 && this.checkedCount == this.count;
				if (this.dataList.length) {
					//防止初始化时被重置
					this.$store.merCheckShopCarIds = checkShopCarIds;
				}
				return total;
			},
			emptyImageUrl() {
				// return 'https://safood.supplyocta.com/Public/miniProgram/images/shopping-car-empty-bg.png'	
				return this.$store.image_header + 'shopping-car-empty-bg.png';
			},
			boxStyle() {
				let b = `--popup-content-bottom:${this.type == 1 ? (this.$store.bottomHeight + 110) : 0}rpx;`;
				return b + `height: calc(100vh - ${this.$store.statusBarHeight + 44}px)`;
			},
			footerStyle() {
				return this.type == 1 ? `height:calc(124rpx + var(--tabbar-height))` :
					`height: ${124 + this.$store.bottomHeight}rpx;padding-bottom:${this.$store.bottomHeight}rpx`;
			},
		},
		async created() {
			await this.$onLaunched;
			this.userInfo = {
				...app.XcxData.userInfo
			};
		},
		methods: {
			async onShows() {
				await this.$onLaunched;
				this.getVipDisCount();
				this.getDataList();
			},
			//点击去逛逛，返回首页
			toHome() {
				uni.reLaunch({
					url: '/pages/mer/tabbar/home/home'
				})
			},
			//查看商品详情
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/mer/goods/details/details?id=' + id
				});
			},
			//点击添加购物车
			async addToCar(index) {
				if (this.goodsList[index].attribute == 2) {
					this.goods = {
						...this.goodsList[index],
						goods_image: this.goodsList[index].path,
						goods_num: 999,
					};
					this.sku.btnText = '加入购物车';
					this.sku.showChangeNum = true;
					this.showSelectSku = true;
				} else {
					const res = await this.$mutations.setShoppingCar({
						goods_id: this.goodsList[index].goods_id,
						num: 1,
					}, 1)
					if (res) {
						this.showSelectSku = false;
						this.getDataList();
					}
				}
			},
			//点击管理、完成
			clickManage() {
				this.isManage = !this.isManage;
			},
			//修改选择状态
			changeAllCheck(val) {
				this.dataList.forEach((item) => {
					item.checked = val;
				})
				if(!this.allChecked){
					this.$store.checkedList =  []
				}

			},
			handlerRadio(val) {
				this.$store.checkedList = this.$store.checkedList.filter(item => item.goods_id !== val.goods_id);
			},
			//关闭规格弹窗
			closeSku(data) {
				this.showSelectSku = false;
				if (this.dataList.length && data) {
					let obj = {
						...this.dataList[this.changeSkuIndex],
						sku_id_list: data.sku_id_list,
						sku_id: data.sku_id,
						sku_name: data.sku_name,
						online_price: data.online_price,
						shop_mem_price: data.shop_mem_price,
						plus_price: data.plus_price,
						path: data.image,
					};
					//查找购物车中是否含有相同规格的商品
					let index = this.dataList.findIndex(item => item.id != obj.id && item.goods_id == obj.goods_id && (!item.sku_id || item.sku_id == obj.sku_id));
					if (index >= 0) {
						//合并购物车
						let oldItem = {
							...this.dataList[index],
							num: toDecimal(this.dataList[index].num * 1 + obj.num),
						};
						this.$set(this.dataList, index, oldItem);
						this.dataList.splice(this.changeSkuIndex, 1);
						this.count--;
						this.updateStoreCar();
					} else {
						this.$set(this.dataList, this.changeSkuIndex, obj);
					}
					this.$forceUpdate();
				} else {
					this.getDataList();
				}
			},
			//更新全局购物车
			updateStoreCar() {
				let goodsList = [];
				this.dataList.forEach(item => {
					goodsList.push({
						id: item.id,
						goods_id: item.goods_id,
						sku_id: item.sku_id,
						num: item.num
					})
				})
				this.$store.merShoppingGoodsList = goodsList;
			},
			//点击修改规格
			async changeSku(index) {
				this.changeSkuIndex = index;
				this.goods = {
					...this.dataList[index],
					goods_image: this.dataList[index].path,
					goods_num: 999,
				};
				this.sku.btnText = '确定';
				this.sku.showChangeNum = false;
				this.showSelectSku = true;
			},
			//减少数量
			setDec(index) {
				if (this.dataList[index].num === 1) {
					this.toDel(index);
				}
				if (this.dataList[index].num > 1) {
					let item = {	
						...this.dataList[index]
					};
					item.num--;
					this.$set(this.dataList, index, item);
					this.$mutations.setShoppingCar({
						id: item.id,
						goods_id: item.goods_id,
						sku_id: item.sku_id,
						num: item.num,
					})
				}
			},
			//输入框失焦
			inputBlur(e, index) {
				let item = {
					...this.dataList[index]
				};
				if (e.detail.value == '') {
					item.num = 1;
				}
				this.$set(this.dataList, index, item);
				this.$mutations.setShoppingCar({
					id: item.id,
					goods_id: item.goods_id,
					sku_id: item.sku_id,
					num: item.num,
				})
			},
			//增加数量
			async setInc(index) {
				let item = {
					...this.dataList[index]
				};
				this.$set(this.dataList, index, item);
				const status = await this.$mutations.setShoppingCar({
					id: item.id,
					goods_id: item.goods_id,
					sku_id: item.sku_id,
					num: item.num + 1
				})
				if (status) {
					item.num++;
				}
			},
			//开始移动
			touchStart(e, id) {
				if (this.isManage) return;
				this.moveId = id;
				this.moveWidth = 0;
				if (e.touches.length == 1) {
					this.moveStartX = e.touches[0].clientX;
					this.moveStartY = e.touches[0].clientY;
				}
			},
			//移动中
			touchMove(e) {
				if (this.isManage) return;
				if (e.touches.length == 1) {
					let x = this.moveStartX - e.touches[0].clientX;
					let y = this.moveStartY - e.touches[0].clientY;

					if (y > 20 || y < -20) return this.moveWidth = 0, this.moveStartY; //纵向移动就撤回

					if (x <= 0) {
						x = 0
					} else if (x > this.delBtnWidth) {
						x = this.delBtnWidth;
					}

					this.moveWidth = x;
				}
			},
			//去结算
			toSettlement() {
				if (!this.checkedCount) return uni.showToast({
					title: '未选择商品',
					duration: 800,
					icon: 'none'
				})
				uni.navigateTo({
					url: '/pages/mer/order/settlement/settlement?ids=' + JSON.stringify(this.checkedIds),
				})
			},
			//删除单个商品
			async toDel(index) {
				if (this.dataList[index] && this.dataList[index].id) {
					const res = await this.submitDel([this.dataList[index].id]);
					if (!res) return;

					let idToFind = this.dataList[index].id; 
					
					this.dataList.splice(index, 1);

					let i = this.$store.merShoppingGoodsList.findIndex(
						item => item && item.id === idToFind); 
					if (i > -1) {
						this.$store.merShoppingGoodsList.splice(i, 1);
						this.count--;
					}

					if (!this.dataList.length && !this.goodsList.length) {
						this.refreshGoods();
					}
				}
			},
			//删除多个商品
			async delGoods() {
				if (!this.checkedCount) return uni.showToast({
					title: '未选择商品',
					duration: 800,
					icon: 'none'
				})
				const res = await this.submitDel(this.checkedIds);
				if (!res) return;

				//删除购物车中的数据
				for (let i in this.checkIndexs) {
					this.dataList.splice(this.checkIndexs[i], 1);
				}
				//删除全局购物车中的数据
				let len = this.$store.merShoppingGoodsList.length;
				for (let i = len - 1; i >= 0; i--) {
					if (this.checkedIds.indexOf(this.$store.merShoppingGoodsList[i].id) != -1) {
						this.$store.merShoppingGoodsList.splice(i, 1);
					}
				}
				this.count = this.dataList.length;
				if (!this.dataList.length && !this.goodsList.length) {
					this.refreshGoods();
				}
			},
			//提交删除商品
			submitDel(ids) {
				return new Promise(resolve => {
					uni.showModal({
						title: '温馨提示',
						content: '确认将这' + ids.length + '个商品从购物车中删除？',
						confirmText: '删除',
						cancelText: '取消',
						success: async (res) => {
							if (!res.confirm) return resolve(false);
							const {
								status,
								data,
								message
							} = await this.$request('SmallProgramApi/Shopping/deleteShopping_v1', {
								id: JSON.stringify(ids),
								store_id: this.$store.mallStoreId,
							});
							if (status == 1) {
								uni.showToast({
									title: message,
									duration: 800,
								})
								resolve(true)
							} else {
								uni.showToast({
									title: message,
									duration: 800,
									icon: 'none'
								})
								resolve(false)
							}
						}
					})
				})
			},
			//获取会员折扣
			async getVipDisCount() {
				if (this.$store.userInfo.type == 1) return this.vipDiscount = 1;
				const {
					status,
					data
				} = await this.$request('SmallProgramApi/Vip/getVipDetails');
				if (status == 1) {
					this.vipDiscount = data.discount;
					this.user_type = data.user_type;
				}
			},
			// 展示plus会员价条件
			showPlusPrice(item) {
				return app.showPlusPrice(item)
			},
			// 展示会员价条件
			showVipPrice(item) {
				return app.showVipPrice(item)
			},
			// 展示普通价格
			showOnlinePrice(item) {
				return app.showOnlinePrice(item)
			},
			//下拉刷新
			async pullDownRefresh() {
				this.isRefresh = true;
				await this.getDataList();
				this.isRefresh = false;
				uni.showToast({
					title: '刷新成功',
					duration: 800
				})
			},
			//获取购物车列表
			async getDataList() {
				const {
					status,
					data: {
						list,
						count
					},
					message
				} = await this.$request('SmallProgramApi/Shopping/getShoppingGoods_v4', { store_id: this.$store.mallStoreId })
				if (status != 1) return;

				this.count = count;

				//设置全局购物车的数据
				let goodsList = [];
				let checkShopCarIds = this.$store.merCheckShopCarIds;
				list.forEach(item => {
					item.checked = checkShopCarIds[item.id] ? true : false;
					goodsList.push({
						id: item.id,
						goods_id: item.goods_id,
						sku_id: item.sku_id,
						num: item.num
					})
				})
				this.dataList = list;
				this.$store.merShoppingGoodsList = goodsList;
				this.dataList.forEach((item) => {
                    let matchedItem = this.$store.checkedList.find(
                         (el) => el.goods_id === item.goods_id
                    );
                    if (matchedItem) {
                         item.checked = true
                    } 
               });

				this.isLoadCarGoods = true;
				if (!list.length) {
					this.refreshGoods();
				}
			},
			//获取商品
			refreshGoods() {
				this.goodsForm.page = 1;
				this.getGoodsList();
			},
			//获取推荐商品数据
			async getGoodsList() {
				if (this.isLoading || !this.canLoad) return;
				this.isLoading = true;
				const {
					status,
					data
				} = await this.$request('SmallProgramApi/MerchantGoods/getRecommendGoodsList', {
					page: this.goodsForm.page,
					limit: this.goodsForm.limit,
				});
				if (status == 1) {
					if (this.goodsForm.page == 1) {
						this.goodsList = data.list;
					} else {
						this.goodsList.push.apply(this.goodsList, data.list);
					}
					this.goodsForm.page++;
					this.isLoading = false;
					this.canLoad = this.goodsList.length < data.count * 1 ? true : false;
				}
			},
		},
	}
</script>

<style lang="scss">
	.car-box {
		background-color: #F8F8F8;

		.car-top-box {
			height: 76rpx;
			padding: 0 20rpx;

			.car-top__left {
				font-size: 28rpx;
				line-height: 36rpx;
				color: #666666;
			}

			.car-top__right {
				font-size: 28rpx;
				color: #333333;
				line-height: 36rpx;

				text:nth-child(2) {
					margin-left: 12rpx;
				}
			}
		}

		.car-goods-content {
			background-color: #FFFFFF;
			border-radius: 12rpx;
			margin: 0 20rpx 20rpx;
			overflow: hidden;

			.car-goods-list {
				padding: 30rpx 20rpx 30rpx 0;
				border-bottom: 1rpx solid #F0F0F0;
				position: relative;
				width: 100%;
				box-sizing: border-box;
				transition: 0.1s;

				&:nth-last-child(1) {
					border-bottom: none;
				}

				.car-goods-list__right {
					margin-left: 16rpx;
					min-height: 200rpx;

					.car-goods-list__name {
						font-size: 28rpx;
						line-height: 52rpx;
						color: #333333;
						font-weight: 500;
					}

					.car-goods-list__sku-box {
						height: 46rpx;
						margin-top: 2rpx;
						background-color: #F8F8F8;
						border-radius: 4rpx;
						font-size: 26rpx;
						line-height: 46rpx;
						color: #999999;
						padding: 0 20rpx 0 16rpx;

						.car-goods-list__sku-icon {
							font-size: 18rpx;
							margin-left: 20rpx;
						}
					}

					.car-goods-price-box {
						font-size: 28rpx;
						line-height: 36rpx;
						margin-top: 24rpx;

						&:nth-child(2) {
							margin-top: 8rpx;
						}

						.price-icon {
							font-size: 24rpx;
							margin-left: 10rpx
						}
					}

					.car-num-box {
						.car-num-icon {
							font-size: 18rpx;
							color: #999999;
							padding: 10rpx;
						}

						.car-num-input {
							width: 70rpx;
							height: 42rpx;
							background-color: rgba(248, 248, 248, 0.39);
							border-radius: 4rpx;
							margin: 0 10rpx;
							font-size: 26rpx;
							line-height: 32rpx;
							text-align: center;
							color: #333333;
						}
					}

				}

				.car-goods-del {
					height: 100%;
					width: 136rpx;
					position: absolute;
					right: -136rpx;
					top: 0;
					font-size: 28rpx;
					line-height: 36rpx;
					background-color: #E3554B;
					color: #FFFFFF;
				}
			}
		}

		.car-footer-box {
			box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.05);
			height: 124rpx;
			padding: 0 24rpx 0 20rpx;
			background-color: #FFFFFF;
			z-index: 1;
			box-sizing: border-box;

			.car-footer__check-text {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #999999;

				&.checked {
					color: #333333;
				}
			}

			.car-footer-text {
				font-size: 26rpx;
				line-height: 30rpx;
				color: #333333;

				.price {
					color: #FF3D3D;
				}
			}

			.car-footer-price {
				font-size: 36rpx;
				line-height: 36rpx;
				font-weight: 500;
				color: #FF3D3D;
			}

			.car-footer-btn {
				width: 200rpx;
				height: 76rpx;
				border-radius: 38rpx;
				background-color: var(--primary-color);
				font-size: 32rpx;
				line-height: 76rpx;
				color: #FFFFFF;
				text-align: center;
				margin-left: 20rpx;

				&.disabled {
					background-color: #BBBBBB;
				}
			}
		}

		.goods-list-box {
			padding: 0 24rpx;
			box-sizing: border-box;
			margin-top: 28rpx;

			.goods-item {
				width: 338rpx;
				margin-bottom: 24rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				min-width: 40%;
				padding-bottom: 16rpx;
				border: 1rpx solid #F5F5F5;
				box-sizing: border-box;
				overflow: hidden;

				.goods-name {
					max-width: 100%;
					font-size: 28rpx;
					line-height: 36rpx;
					padding: 0 20rpx;
					margin: 8rpx 0 10rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					align-content: center;
				}

				.goods-price-box {
					font-size: 32rpx;
					line-height: 36rpx;
					margin-left: 20rpx;
				}

				.add-car-icon {
					color: var(--primary-color);
					font-size: 52rpx;
					margin-right: 20rpx;
					margin-bottom: 14rpx;
				}
			}
		}

		.empty-tip-box {
			width: 100%;
			height: 542rpx;
			padding-top: 16rpx;
			box-sizing: border-box;

			.car-empty-tip {
				font-size: 28rpx;
				line-height: 36rpx;
				margin-top: 22rpx;
				color: #333333;
			}

			.car-empty-sub-tip {
				font-size: 26rpx;
				line-height: 32rpx;
				margin-top: 20rpx;
				color: #999999;
			}

			.car-empty-btn {
				width: 212rpx;
				height: 68rpx;
				border-radius: 40rpx;
				background-color: var(--primary-color);
				font-size: 28rpx;
				line-height: 68rpx;
				text-align: center;
				margin-top: 38rpx;
				color: #FFFFFF;
			}
		}

		.car-empty-title {
			font-size: 28rpx;
			line-height: 36rpx;
			color: #333333;
			font-weight: 500;
			padding-left: 24rpx;
		}
	}
</style>
